<template>
  <el-container style="border: 1px solid #eee">
    <!--      头部-->
      <el-header class="header" style="width: 100%!important;background-color: rgb(40,44,52)">
        <!--      搜索-->
        <el-row style="height: 100%">
          <el-col :span="7" style="height: 100%;">
            <div style="height: 100%!important;">
              <el-badge class="item" style="width: 100%">
            <el-carousel direction="vertical" style="height: 50px;" indicator-position="none" autoplay :interval="8000">
<!--              走马灯-->
                <el-carousel-item v-for="item in mottoList" :key="item">
                  <h3 style="width:100%;text-align: center;
                  color: rgb(207,232,167);margin-top: 10px" class="layui-icon layui-icon-speaker">{{item}}</h3>
                </el-carousel-item>
              </el-carousel>
             </el-badge>
            </div>
          </el-col>

          <el-col :span="6" style="height: 100%">
            <el-badge class="item" style="width: 100%">
              <el-input placeholder="请输入内容" clearable v-model="input" class="input-with-select" style="width: 100%">
                <el-button slot="append" icon="el-icon-search">搜索</el-button>
              </el-input>
            </el-badge>
          </el-col>
          <el-col :span="8" style="height: 100%">
<!--            <el-badge :value="200" :max="99" class="item">-->
<!--              <el-button size="small">评论</el-button>-->
<!--            </el-badge>-->
<!--            <el-badge :value="100" :max="10" class="item">-->
<!--              <el-button size="small">回复</el-button>-->

<!--            </el-badge>-->
               <el-badge  class="item">
                 <span v-if="flag" style="color: rgb(24,144,255)" class="el-icon-location-outline">
                   当前位置：{{location}}
                 </span>
                 <span v-else style="color: #669900">
                   正在定位
                 </span>
            </el-badge>
             </el-col>
           <el-col :span="2" style="height: 100%;">
<!--             显示用户昵称-->
             <el-badge class="item-name" >
                 <el-button size="small" @click="PersonalInformation=true"
                   class="username" style="background-color: rgb(40,44,52)!important;color: #eee;border: none" v-model="u_names">{{u_names}}</el-button>
            </el-badge>
            <el-dropdown>
              <img :src="avatarSrc" class="avatar">
<!--              &lt;!&ndash;        头像&ndash;&gt;-->
<!--              <el-avatar src="..//avatar" fit="scale-down">-->
<!--                &lt;!&ndash;          <el-button ></el-button>&ndash;&gt;-->
<!--              </el-avatar>-->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="PersonalInformation=true">设置</el-dropdown-item>
                <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
<!--        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px">-->
<!--  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--  <el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
<!--  <el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
<!--  <el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
<!--</el-breadcrumb>-->
      </el-header>

    <el-container style="height: 730px">
<!--    侧边栏-->
    <el-aside  style="background-color: #282C34;height: 100%;width: 200px!important;" >
<!--    default-active:打开首页  default-openeds:展开我的首页-->
<!--      default-active="/index/Welcome" :default-openeds='["0"]'-->
      <el-menu :unique-opened="true" background-color="#282C34"  router text-color="#fff" active-text-color="#ffd04b" default-active="/index/Welcome" :default-openeds='["0"]'>
<!--          一级导航-->
        <el-submenu :index="item.menuid+''" v-for="item in menus" :key="item.menuid">
          <template slot="title">
            <i class="menu-home" :class="item.icon"></i>
            <span >{{item.menuname}}</span>
          </template>
<!--          二级菜单-->
          <el-menu-item :index="item2.path" v-for="item2 in item.children" :key="item2.menuid">
            <i  :class="item2.icon"></i>
            <span  >{{item2.menuname}}</span>
          </el-menu-item>

        </el-submenu>

      </el-menu>
<!--      当前城市-->
      <span class="el-icon-location-outline" v-if="temperature" style="margin-top: 50px;color: rgb(207,232,167)">
        {{City}}  {{temperature}}℃    {{weather}}
      </span>
      <span  style="margin-top: 50px;color: rgb(207,232,167)" v-else>

      </span>
    </el-aside>
<!--主容器-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
<!--    右拉框-->
    <el-drawer title="我是标题" :visible.sync="PersonalInformation">
      <span>我来啦!</span>
    </el-drawer>
  </el-container>
</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 80px;
}
.el-aside {
  color: #333;
}
</style>
<script>
import router from "../router";

export default {
  data () {
    return {
      MenuList:[],
      UN:'',
      City:'',
      weather:'',
      temperature:'',
      input: '',
      location,
      flag:false,
      avatarSrc:'static/avatar.jpg',//头像
      PersonalInformation: false,
              // 系统公告
        mottoList: [
            '等风来不如追风去，追逐的过程就是人生的意义',
            '当你想要放弃了，那就想想当初为什么开始',
            '自强之人谁也打不倒，自弃之人谁也带不动',
            '岁月风尘里，我们泪流满面的争吵与退让',
            '在难过的时候，不要忘记自己还要前进',
            '人心无底洞，填不满，掏不空'
        ],
    }
  },
  watch:{
  },
  methods: {
    UpdateMenu(){
        this.MenuList =  JSON.parse(window.sessionStorage.getItem('SetUser')).result.menu
       this.UN = JSON.parse(window.sessionStorage.getItem('SetUser')).result.name
    },
    GetMenus(){
      this.MenuList = this.$route.params.cyq.result.menu //获取菜单列表
      this.UN = this.$route.params.cyq.result.name
    },
    GetLocation(location){//获取位置信息
      if(location) {
        this.location = location.location,
          this.flag = location.flag
      }
    },
    //获取天气信息
    GetValue(data){
      this.City = data.city
      this.weather = data.weather
      this.temperature = data.temperature
    },
    //退出登录
    exit () {
        this.$confirm('将要退出登录，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {

          this.$message({
            type: 'success',
            message: '退出成功',
            duration:1000 //显示1s
          });
          //退出成功，删除token
          window.sessionStorage.removeItem('token')
          window.sessionStorage.removeItem('SetUser')
          this.MenuList = ''
          setTimeout(()=>{ //延时1s,返回登录页
            this.$router.push('/login')
          },1000)
             //退出后刷新一下登录页面，防止新登录用户拥有上一次登录用户的信息
             window.location.reload();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            duration:500 //显示0.5s
          });
        });
    },
    // goBack() {
    //   console.log('go back');
    // }
  },
  computed: {//计算属性
    menus(){
      return  JSON.parse(window.sessionStorage.getItem('SetUser')).result.menu
    },
    u_names(){
      return  JSON.parse(window.sessionStorage.getItem('SetUser')).result.name
    }
  }

};
</script>
<style>
  .el-menu{
    border-right: none;
  }
  /*// 菜单选中背景色*/
/*.el-menu-item.is-active{*/
/*  background-color: #1890FF !important;*/
/*}*/
/*// 菜单悬浮背景色*/
  .el-menu-item{
      font-size: 13px;
  }
.el-menu-item:hover{
  font-size: 16px;
  background-color: #1890FF !important;
}
/*头部*/
.header{
  text-align: right;
  font-size: 12px;
  height: 50px;
  /*display: inline-block;*/
  background-color:#DCDFE6
}
.item,.item-name {
  margin-top: -20px;
  line-height: 30px;

}
/*显示用户昵称*/
.username{
  font-size: medium;
    background-color:#DCDFE6
}
/*消息提示类*/
.item{
    margin-right: 30px;
}
/*昵称*/
.item-name{
  margin-right: 0;
}
/*头像*/
  .avatar{
    width: 50px;
    height: 50px;
    margin-top: -20px;
    /*圆形*/
    border-radius: 50%;
    cursor: pointer;
    /*头像边框*/
    border:1px solid silver;
  }
</style>

<style>
#app {
  margin-top: 0;
}
body{
  background-color: #eeeeee;
}
</style>
